const generateHtml = () => `
<style>
  div {
    border: 2px solid hsl(180, 100%, 50%);
    margin-top: 1em;
    padding: 6em 1em;
  }
  h1 {
    color: hsl(210, 100%, 50%);
    font-size: 3rem;
  }
  button {
    padding: 1em;
    border: none;
    border-radius: 4px;
    background-color: hsl(180, 80%, 30%);
    color: white;
    font-weight: bold;
    font-size: 1.2em;
  }
</style>
<div>
  <h1>hello world</h1>
  <button>Click</button>
</div>
`;


const template = document.createElement('template');
template.innerHTML = generateHtml();

class Card extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

window.customElements.define('wc-card', Card);
